<!-- 轮播 -->
<template>
  <div>
    <div class="home-title pt-32 pb-24">
      <div>首席专题直播</div>
      <div class="more" v-if="liveAuth">
        <div class="mr-10" @click="goLivePage">更多</div>
        <div class="icon-more"></div>
      </div>
    </div>
    <BannerLoadMore
      :videoList="swiperList"
      :liveAuth="liveAuth"
      @change="refresh"
      v-if="swiperList.length && loadFinish"
    ></BannerLoadMore>
  </div>
</template>

<script>
import query from '@/lib/query.js';
import BannerLoadMore from './BannerLoadMore.vue';
export default {
  name: 'Banner',
  components: { BannerLoadMore },
  data() {
    return {
      swiper: null,
      swiperList: [],
      updateTimer: null,
      // 直播权限
      liveAuth: false,
      loadFinish: false,
    };
  },
  created() {
    this.reqData();
    this.getLiveAuth();
    // 轮播图数据更新时间10min
    const updateTime = 600000;
    this.updateTimer = setInterval(() => {
      if (!_Global.isWindowShow) {
        // 后台不查询数据
        return;
      }
      this.reqData();
    }, updateTime);
  },
  beforeDestroy() {
    if (this.updateTimer) {
      clearInterval(this.updateTimer);
    }
  },
  methods: {
    getLiveAuth() {
      // 取直播标签，目的是判断权限
      query
        .getLiveTabs()
        .then(res => {
          if (res.data) {
            let auth = false;
            res.data.forEach(e => {
              if (e.label_id) {
                auth = true;
              }
            });
            this.liveAuth = auth;
          }
          this.loadFinish = true;
        })
        .catch(err => {
          this.loadFinish = true;
          this.mixinErrHandler(err, this.reload);
        });
    },
    reqData() {
      // 请求轮播图数据，实际这里的pageStatus是用来对应homed的loading
      const param = {
        size: 6,
      };
      query
        .getLiveBanner(param)
        .then(res => {
          if (res.data) {
            this.formatData(res.data);
          }
          this.$pageStatus.close();
        })
        .catch(err => {
          this.$pageStatus.close();
          this.mixinErrHandler(err, this.reload);
        });
    },
    refresh() {
      // 内部订阅时，重新请求来更新数据
      this.reqData();
    },
    goLivePage() {
      // 直播列表
      this.$router.push({ path: '/liveList' });
    },
    formatData(data) {
      if (JSON.stringify(data) === JSON.stringify(this.swiperList)) {
        // 无更新则不同步
        return;
      }
      this.swiperList = data;
      this.$forceUpdate();
    },
  },
};
</script>

<style lang="less" scoped>
.swiper {
  width: 7.34rem;
  height: 3.12rem;
  margin-left: 0.16rem;
  margin-top: 0.16rem;
  .swiper-container {
    width: 7.34rem;
    height: 3.12rem;
  }
}
</style>
